import * as echarts from 'echarts'
import { useEffect, useRef } from 'react'
import '../PieChart/index.scss'
export default function Linechart({ xAxisData = [], data = {} }) {
    const chartRef = useRef(null)
    useEffect(() => {
        function renderChart() {
            const myChart = echarts.init(chartRef.current);
            const colors = ['#165DFF', '#2CB8C5']
            const option = {
                tooltip: {
                    trigger: "axis",
                },
                grid: {
                    top: '40',
                    left: 0,
                    right: 20,
                    bottom: '0',
                    containLabel: true
                },
                legend: {
                    right: 'center',
                    itemWidth: 8,
                    itemHeight: 2,
                    orient: 'horizontal',
                    icon: 'rect',
                    textStyle:{
                        color:'#4E5969',
                    },
                    data: data.data.map(item => item.name)
                },
                xAxis: [
                    {
                        type: 'category',
                        data: xAxisData,
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(28,31,35,0.8)'
                            }
                        },

                    }
                ],
                yAxis: data.yName.map(item => (
                    {
                        type: 'value',
                        name: item.name,
                        nameTextStyle: {
                            color: '#86909C'
                        },
                        axisLabel: {
                            formatter: '{value}',
                            textStyle: {
                                color: '#86909C'
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#1c1f23'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#e6e8ea',
                                type: 'dashed'
                            }
                        }
                    }
                )),
                series: data.data.map((item, index) => ({
                    name: item.name,
                    type: "line",
                    yAxisIndex: index,
                    smooth:true,
                    color: colors[index],
                    tooltip: {
                        valueFormatter: function (value) {
                            return value;
                        }
                    },
                    data: item.data
                })),
            }
            option && myChart.setOption(option);
        }
        renderChart()
    }, [data])
    return (
        <div ref={chartRef} style={{ width: '100%', height: '100%' }}></div>
    )
}
